<template>
    <div id="analyzeContainer">
        <div>
            <div style="display: flex">
                <div id="qualificationChart" class="chart"></div>
                <div id="sexChart" class="chart"></div>
                <div id="myChart" class="chart"></div>
            </div>
            <div style="display: flex">
                <div id="empRemoveChart" class="emp-remove"></div>
                <div id="clockingInChart" class="chart"></div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "StaAll",
        data () {
            return {
                msg: 'Welcome to Your Vue.js App',
                depEmpNum: [{value:1, name:'系统繁忙'}],
                sexNum: [{value:1, name:'系统繁忙'}],
                tiptopDegreeNum: [{value:1, name:'系统繁忙'}],
                EmpRemoveX:['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                EmpRemoveY:[10, 20, 50, 80, 70, 10, 30],
                clockingInNum: [{value:1, name:'系统繁忙'}],
            }
        },
        mounted(){
            this.initDepNum();
            this.initSexNum();
            this.initTiptopDegreeNum();
            this.initEmpRemoveNum();
            this.initClockingInNum();
        },
        methods: {
            //饼状图
            drawLine(elename,title,data){
                // 基于准备好的dom，初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById(elename))
                // 绘制图表
                myChart.setOption({
                    title : {
                        text: title,
                        subtext: '',
                        x:'left',
                        y: 'top',
                        textStyle: {
                            fontSize: 12,
                            color: '#333'          // 主标题文字颜色
                        }
                    },
                    series : [
                        {
                            name: '部门人数分步',
                            type: 'pie',
                            radius: '50%', //饼图的半径大小
                            //center: ['60%', '60%'],//饼图的位置
                            data: data,
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: true,
                                        formatter: '{b} : {c}人 ({d}%)'
                                    },
                                }
                            }
                        }
                    ]
                });
            },
            //柱状图
            draw(elename,title,xdata,ydata){
                // 基于准备好的dom，初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById(elename))
                // 绘制图表
                myChart.setOption({
                    //标题样式
                    title : {
                        text: title,
                        subtext: '',
                        x:'left',
                        y: 'top',
                        textStyle: {
                            fontSize: 12,
                            color: '#333'          // 主标题文字颜色
                        }
                    },
                    //提示框
                    tooltip : {
                        trigger : 'axis',
                        position : 'top',
                        axisPointer : {
                            type : 'cross',
                            label : {
                                backgroundColor : '#6a7985'
                            }
                        }
                    },
                    // Y滑动框
                   /* dataZoom: [
                        //Y轴滑动条
                        {
                            type: 'slider', //滑动条
                            show: true,      //开启
                            yAxisIndex: [0],
                            left: '93%',  //滑动条位置
                            start: 1,    //初始化时，滑动条宽度开始标度
                            end: 50      //初始化时，滑动条宽度结束标度
                        },
                        //y轴内置滑动
                        {
                            type: 'inside',  //内置滑动，随鼠标滚轮展示
                            yAxisIndex: [0],
                            start: 1,//初始化时，滑动条宽度开始标度
                            end: 50  //初始化时，滑动条宽度结束标度
                        } ],*/
                    // X滑动框
                    dataZoom: [
                        //X轴滑动条
                        {
                            type: 'slider', //滑动条
                            show: true,      //开启
                            xAxisIndex: [0],
                            left: '9%',  //滑动条位置
                            bottom: 10,
                            height: 10,
                            start: 1,    //初始化时，滑动条宽度开始标度
                            end: 200      //初始化时，滑动条宽度结束标度
                        },
                        //X轴内置滑动
                        {
                            type: 'inside',  //内置滑动，随鼠标滚轮展示
                            xAxisIndex: [0],
                            start: 1,//初始化时，滑动条宽度开始标度
                            end: 200  //初始化时，滑动条宽度结束标度
                        } ],
                    xAxis: {
                        type: 'category',
                        data: xdata
                    },
                    yAxis: {
                        type: 'value',
                        min: 0,
                        max: 10,
                        interval: 2
                    },
                    series: [{
                        data: ydata,
                        type: 'bar',

                    }]
                });
            },
            drawannular(elename,title,data){
                // 基于准备好的dom，初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById(elename))
                // 绘制图表
                myChart.setOption({
                    color: ['#ff0000','#00ff00', '#0000ff', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],
                    title : {
                        text: title,
                        subtext: '',  //副标题
                        x:'left',
                        y: 'top',
                        textStyle: {
                            fontSize: 12,
                            color: '#333'          // 主标题文字颜色
                        }
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        top: '5%',
                        left: 'center'
                    },
                    series: [
                        {
                            name: '访问来源',
                            type: 'pie',
                            radius: ['40%', '70%'],
                            avoidLabelOverlap: false,
                            itemStyle: {
                                borderRadius: 10,
                                borderColor: '#fff',
                                borderWidth: 2
                            },
                            label: {
                                show: false,
                                position: 'center',
                                formatter: '{b} : {c}人 ({d}%)'
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: '40',
                                    fontWeight: 'bold'
                                }
                            },
                            labelLine: {
                                show: false
                            },
                            data: data
                        }
                    ]
                });
            },
            initDepNum(){
                this.getRequest('/employee/basic/depempnum').then(resp => {
                    if(resp){
                        this.depEmpNum = []
                        resp.obj.forEach((item,index) => {
                            this.depEmpNum.push({"value":item.depEmpNum,"name":item.name})
                        })
                        this.drawLine('myChart','公司部门人数分布',this.depEmpNum);
                    }
                })
            },
            initSexNum(){
                this.getRequest('/employee/basic/sexNum').then(resp => {
                    if(resp){
                        this.sexNum = []
                        resp.obj.forEach((item,index) => {
                            this.sexNum.push({"value":item.num,"name":item.gender})
                        })
                        console.log(this.sexNum)
                        this.drawLine('sexChart','公司性别人数分布',this.sexNum);
                    }
                })
            },
            initTiptopDegreeNum(){
                this.getRequest('/employee/basic/tiptopDegreeNum').then(resp => {
                    if(resp){
                        this.tiptopDegreeNum = []
                        resp.obj.forEach((item,index) => {
                            this.tiptopDegreeNum.push({"value":item.num,"name":item.tiptopDegree})
                        })
                        this.drawannular('qualificationChart','公司学历人数分布',this.tiptopDegreeNum);
                    }
                })
            },
            initEmpRemoveNum(){
                this.getRequest('/personnel/remove/empRemoveList').then(resp => {
                    if(resp){
                        this.EmpRemoveX = []
                        this.EmpRemoveY = []
                        console.log(resp)
                        resp.obj.forEach((item,index) => {
                            this.EmpRemoveX.push(item.date)
                            this.EmpRemoveY.push(item.num)
                        })
                        this.draw('empRemoveChart','公司人事调动分布',this.EmpRemoveX,this.EmpRemoveY);
                    }
                })
            },
            initClockingInNum(){
                this.getRequest('/personnel/ec/clockingInNum').then(resp => {
                    if(resp){
                        this.clockingInNum = []
                        console.log(resp)
                        let obj = resp.obj;
                        for(let key in obj){
                            this.clockingInNum.push({"value":obj[key],"name":key})
                        }
                        this.drawLine('clockingInChart','公司考勤人数分布',this.clockingInNum);
                    }
                })
            },
        }
    }
</script>

<style scoped>
    #analyzeContainer{
        background-color: #DDDDDD;
        padding-top: 10px;
    }
    .emp-remove{
        width: 60%;
        height: 300px;
        background-color: #ffffff;
        margin: 10px 10px;
    }
    .chart{
        width:30%;
        height: 300px;
        background-color: #ffffff;
        margin: 5px;
    }
</style>